import React,{useState} from 'react';
import {Link} from 'react-router-dom';
import {useSelector,useDispatch} from 'react-redux';
import {actions} from './store';
import styles from './style.css';

//组件
const Header = (props) => {
  const header = useSelector((state) => {
    // console.log('state:', state);
    return state.header;
  });

  const dispatch = useDispatch();

  /** 可以考虑使用WithStyle在组件外包一层（但注意loadData静态方法 此时就应该挂在包的这个层上面了）
   * 或则使用自定义hooks
   * 再或则不在这里传递出去,而是直接在react-ssr.js中根据匹配到的路由组件找到对应的css文件,在react-ssr.js中直接调用._getCss()
   * 这样就不用在每个组件里手动写了*/
  if (styles._getCss) {
    props.staticContext.css.push(styles._getCss());
  }

  return (
    <div className={styles.test}>
      <Link to=''>首页</Link>
      <br/>
      {
        header.login ? <>
            <Link to='/translate'>翻译列表</Link>
            <br/>
            <div onClick={()=>dispatch(actions.logout())}>退出</div>
          </> :
          <div onClick={()=>dispatch(actions.login())}>登录</div>
      }
    </div>
  );
};

export default Header
